<template>
  <div>
    <!-- v-model:文本框的value属性和数据变量双向绑定 -->
    <!-- 注意:v-model暂时只用在表单元素上 -->
    用户名: <input v-model="username" type="text"> <br>
    密码: <input v-model="password" type="text"> <br>
    <!-- 下拉框的v-model绑定在select上 -->
    <!-- 把option的value绑定数据变量 -->
    家乡:
    <select v-model="city">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="gz">广州</option>
    </select>
    <br>
    <!-- 复选框: 特点:1.双向绑定的数据是数组,会将勾选的复选框value值添加到数组.
    2.双向绑定的数据是非数组(隐式转换为boolean),会将勾选状态同步给数据变量.
    结论: 如果绑定的是数组,其实绑定的就是value属性,如果绑定的是非数组,则绑定的是checked属性,控制复选框勾选状态的属性是:checked. -->
    <input v-model="isCheck1" type="checkbox" value="smoke" />抽烟
    <input v-model="isCheck2" type="checkbox" value="drink" />喝酒
    <input v-model="isCheck3" type="checkbox" value="perm" />烫头
    <br>
    性别:
    <input v-model="gender" type="radio" name="gender" value="male"> 男
    <input v-model="gender" type="radio" name="gender" value="female"> 女
    <br>
    介绍: 
    <textarea v-model="intro" cols="20" rows="10"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: 'wcd',
      password: '',
      city: 'gz',
      hobby: [],
      isCheck1: true,
      isCheck2: true,
      isCheck3: true,
      gender: '',
      intro: ''
    }
  },
}
</script>

<style lang="scss" scoped>

</style>